import { title } from "@/components/primitives";
import DefaultLayout from "@/layouts/default";
import { useEffect, useState } from "react";
import { fetchImage } from "../services/api";
import {Card, CardBody, CardFooter, Image} from "@nextui-org/react";

export default function DocsPage() {
  const [images, setImages] = useState<image[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const getData = async () => {
      try {
        const result = await fetchImage();
        setImages(result);
      } catch (err) {
        // 确保err是一个Error对象
        if (err instanceof Error) {
          setError(err.message);
        } else {
          // 如果err不是Error对象，可以设置一个通用的错误信息
          setError("An unknown error occurred");
        }
      }
    };

    getData();
  }, []);

  if (error) return <div>Error: {error}</div>;

  return (
    <DefaultLayout>
      <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
        <div className="inline-block max-w-lg text-center justify-center">
          <h1 className={title()}>About</h1>
          <div className="gap-2 grid grid-cols-2 sm:grid-cols-4">
            {images.map((item, index) => (
              <Card shadow="sm" key={index} isPressable onPress={() => console.log("item pressed")}>
                <CardBody className="overflow-visible p-0">
                  <Image
                    shadow="sm"
                    radius="lg"
                    width="100%"
                    alt={item.caption}
                    className="w-full object-cover h-[140px]"
                    src={item.src}
                  />
                </CardBody>
                <CardFooter className="text-small justify-between">
                  <b>{item.caption}</b>
                  {/*<p className="text-default-500">{item.caption}</p>*/}
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </section>
    </DefaultLayout>
  );
}
